<html>

<head>
    <meta charset="utf-8">
    <title>支付提示</title>
    <script type="text/javascript" src="/src/assets/js/axios.min.js"></script>
    <script type="text/javascript" src="/src/assets/js/vue.min.js"></script>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
    />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
        }

        .hidden {
            display: none;
        }

        .new-btn-login-sp {
            padding: 1px;
            display: inline-block;
            width: 75%;
        }

        .new-btn-login {
            background-color: #02aaf1;
            color: #ffffff;
            font-weight: bold;
            border: none;
            width: 100%;
            height: 30px;
            border-radius: 5px;
            font-size: 16px;
        }

        #main {
            width: 100%;
            margin: 0 auto;
            font-size: 14px;
        }

        .red-star {
            color: #f00;
            width: 10px;
            display: inline-block;
        }

        .null-star {
            color: #fff;
        }

        .content {
            margin-top: 10px;
            height: 500px;
        }

        .content dt {
            width: 100px;
            display: inline-block;
            float: left;
            margin-left: 20px;
            color: #666;
            font-size: 13px;
            margin-top: 8px;
        }

        .content dd {
            margin-left: 120px;
            margin-bottom: 5px;
        }

        .content dd input {
            width: 85%;
            height: 28px;
            border: 0;
            -webkit-border-radius: 0;
            -webkit-appearance: none;
        }

        #foot {
            margin-top: 10px;
            position: absolute;
            bottom: 15px;
            width: 100%;
        }

        .foot-ul {
            width: 100%;
        }

        .foot-ul li {
            width: 100%;
            text-align: center;
            color: #666;
        }

        .note-help {
            color: #999999;
            font-size: 12px;
            line-height: 130%;
            margin-top: 5px;
            width: 100%;
            display: block;
        }

        #btn-dd {
            margin: 20px;
            text-align: center;
        }

        .foot-ul {
            width: 100%;
        }

        .one_line {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #eeeeee;
            width: 100%;
            margin-left: 20px;
        }

        .am-header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: box;
            width: 100%;
            position: relative;
            padding: 7px 0;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            background: #1d222d;
            height: 50px;
            text-align: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            box-pack: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            box-align: center;
        }

        .am-header h1 {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            box-flex: 1;
            line-height: 18px;
            text-align: center;
            font-size: 18px;
            font-weight: 300;
            color: #fff;
        }

        *,
        :before,
        :after {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        form,
        fieldset,
        legend,
        input,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        fieldset,
        img {
            border: 0
        }

        li {
            list-style: none
        }

        caption,
        th {
            text-align: left
        }

        q:before,
        q:after {
            content: ""
        }

        input:password {
            ime-mode: disabled
        }

        :focus {
            outline: 0
        }

        html,
        body {
            -webkit-touch-callout: none;
            touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            height: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 15px;
            font-weight: 300;
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
        }

        a {
            text-decoration: none
        }

        body {
            background: #F4F4F8
        }

        .weixin-tip {
            display: none;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            top: 15px;
            right: 20px;
            width: 265px;
            padding: 55px 0 0;
            text-align: left;
            background: url() no-repeat right top;
            background-size: 45px 68px
        }

        .content-zhifu {
            display: block;
            overflow: hidden;
        }

        .weixin-tip-img {
            display: none;
            padding: 110px 0 0
        }

        .weixin-tip-img::after {
            display: block;
            margin: 15px auto;
            content: ' ';
            background-size: cover
        }

        .weixin-tip-img.iphone::after {
            width: 150px;
            height: 150px;
            background-image: url()
        }

        .weixin-tip-img.android::after {
            width: 173px;
            height: 240px;
            background-image: url()
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="J-weixin-tip weixin-tip">
            <div class="weixin-tip-content">
                请在菜单中选择在浏览器中打开,<br/> 以完成支付
            </div>
        </div>
        <div class="J-weixin-tip-img weixin-tip-img"></div>


        <div class="content-zhifu">
            <header class="am-header">
                <h1>支付宝支付</h1>
            </header>

            <div id="body" style="clear:left">
                <dl class="content">
                    <dt>商户订单号：</dt>
                    <dd>
                        <input readonly="readonly" id="WIDout_trade_no" name="WIDout_trade_no" v-model="WIDout_trade_no" />
                    </dd>
                    <hr class="one_line">
                    <dt>订单名称：</dt>
                    <dd>
                        <input readonly="readonly" id="WIDsubject" name="WIDsubject" v-model="WIDsubject" />
                    </dd>
                    <hr class="one_line">
                    <dt>付款金额：</dt>
                    <dd>
                        <input readonly="readonly" id="WIDtotal_amount" name="WIDtotal_amount" v-model="WIDtotal_amount" />
                    </dd>
                    <hr class="one_line" />
                    <dt>商品描述：</dt>
                    <dd>
                        <input readonly="readonly" id="WIDbody" name="WIDbody" v-model="WIDbody" />
                    </dd>
                    <hr class="one_line">
                    <dt></dt>
                    <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button @click="goPay()" class="new-btn-login" style="text-align:center;">确 认</button>
                        </span>
                        <span class="note-help">如果您点击“确认”按钮，即表示您同意该次的执行操作。</span>
                    </dd>
                </dl>
            </div>

            <div id="foot">
                <ul class="foot-ul">
                    <li>
                        支付宝版权所有 2015-2018 ALIPAY.COM
                    </li>
                </ul>
            </div>

        </div>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                WIDout_trade_no: this.GetDateNow(),
                WIDsubject: '',
                WIDtotal_amount: '',
                WIDbody: '',
                mobile: '',
                integral: '',
                adminId:'',
                orderSn:'',
                type:'',
                amount:'',
                mechanismId:'',
                moneyconfig:''
            }
        },
        mounted() {
           
            this.init()
        },
        methods: {
            init() {
                if (location.hash.indexOf('error') != -1) {
                    alert('参数错误，请检查');
                } else {
                    var ua = navigator.userAgent.toLowerCase()
                    var tip = document.querySelector('.weixin-tip')
                    var tipImg = document.querySelector('.J-weixin-tip-img')
                    var zhifu = document.querySelector('.content-zhifu')

                    if (ua.indexOf('micromessenger') != -1) {
                        tip.style.display = 'block'
                        tipImg.style.display = 'block'
                        zhifu.style.display = 'none'
                        if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1) {
                            tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone'
                        } else {
                            tipImg.className = 'J-weixin-tip-img weixin-tip-img android'
                        }
                    } else {
                        var getQueryString = function (url, name) {
                            var reg = new RegExp('(^|\\?|&)' + name + '=([^&]*)(\\s|&|$)', 'i');
                            if (reg.test(url)) return RegExp.$2.replace(/\+/g, ' ')
                        }
                        this.mobile = getQueryString(location.href, 'mobile');
                        // location.href = param != '' ? _AP.decode(param) : 'pay.html#error';
                        //  this.$router.push({path: '/pay#error'});
                        this.WIDtotal_amount = getQueryString(location.href, 'money');
                        this.integral = getQueryString(location.href, 'integral');
                        this.amount = getQueryString(location.href, 'amount');
                        this.WIDbody = decodeURIComponent(getQueryString(location.href, 'reason'));
                        this.WIDsubject = decodeURIComponent(getQueryString(location.href, 'reason'));
                        this.adminId = decodeURIComponent(getQueryString(location.href, 'adminId'));
                        this.mechanismId = decodeURIComponent(getQueryString(location.href, 'mechanismId'));
                        this.moneyconfig = decodeURIComponent(getQueryString(location.href, 'moneyconfig'));
                        this.type = decodeURIComponent(getQueryString(location.href, 'type'));
                        this.orderSn = decodeURIComponent(getQueryString(location.href, 'orderSn'));
                        this.GetDateNow();
                    }
                }
            },
            GetDateNow() {
                var vNow = new Date()
                var sNow = ''
                sNow += String(vNow.getFullYear())
                sNow += String(vNow.getMonth() + 1)
                sNow += String(vNow.getDate())
                sNow += String(vNow.getHours())
                sNow += String(vNow.getMinutes())
                sNow += String(vNow.getSeconds())
                sNow += String(vNow.getMilliseconds())

                if(this.orderSn==''|| this.orderSn=='undefined'){
                    this.WIDout_trade_no = sNow
                }else{
                    this.WIDout_trade_no = this.orderSn
                }
                
                // document.getElementById('WIDout_trade_no').value = sNow
                // document.getElementById('WIDsubject').value = '手机网站支付测试商品'
                // document.getElementById('WIDtotal_amount').value = '0.01'
                // document.getElementById('WIDbody').value = '购买测试商品0.01元'
            },
            goPay() {
                //插入钱包记录
                axios
                    .get('http://mall.icloudmedi.com:8084/mechanismadmin/mobilePay/addWallet', {
                        params: {
                            mobile: this.mobile,
                            integral:this.integral,
                            reason: this.WIDbody,
                            payType: '1',
                            amount:this.amount,
                            recordSn: this.WIDout_trade_no,
                            adminId:this.adminId,
                            mechanismId:this.mechanismId,
                            types:this.type
                        }
                    })
                    .then(res => {
                        if (res.data.errno === 0) {
                            //开始付款
                            axios.get('http://mall.icloudmedi.com:8084/mechanismadmin/mobilePay/AliPay', {
                                params: {
                                    WIDout_trade_no: this.WIDout_trade_no,
                                    WIDsubject: this.WIDsubject,
                                    WIDtotal_amount: this.WIDtotal_amount,
                                    WIDbody: this.WIDbody
                                }
                            })
                                .then(
                                    res => {
                                        console.log(res.data.data.form)
                                        if (res.status == 200) {
                                            const div = document.createElement('div')
                                            div.innerHTML = res.data.data.form //此处form就是后台返回接收到的数据
                                            document.body.appendChild(div)
                                            document.forms[0].submit()

                                            
                                        } else {
                                            alert('请求出现错误')
                                        }

                                        console.log(res)
                                    },
                                    err => {
                                        console.log(err)
                                    }
                                )
                        }

                    },
                        err => {
                            console.log(err)
                        }
                    )


            }
        }
    })

</script>

</html>